{% extends 'base.html' %}
{% load i18n %}
{% load static %}
{% load  sizeformat %}

{% block title %}{% translate '系统盘扩容' %}{% endblock %}

{% block boby %}
    <div class="container-fluid col-12">
        <div class="card">
            <div class="card-header">
                <span class="card-title"><strong>{% translate '虚拟机系统盘扩容' %}</strong></span>
                <div class="float-right">
                    <a class="btn btn-sm btn-success" href="{% url 'vms:vm-create' %}">{% translate '创建虚拟机' %}</a>
                    <a class="btn btn-sm btn-info" href="{% url 'vms:vms-list' %}">{% translate '虚拟机列表' %}</a>
                </div>
            </div>
            <div class="card-body">
                <div class="">
                    <div class="text-primary h4">{% translate '虚拟机信息' %}:</div>
                    <div class="">
                        <dl class="row">
                            <dt class="col-2 text-right">{% translate '虚拟机UUID' %}:</dt> <dd class="col-10" id="id-vm-uuid">{{ vm.hex_uuid }}</dd>
                            <dt class="col-2 text-right">{% translate '虚拟机IP地址' %}:</dt> <dd class="col-10">{{ vm.ipv4 }}</dd>
                            <dt class="col-2 text-right">{% translate 'CPU数' %}:</dt> <dd class="col-10">{{ vm.vcpu }}</dd>
                            <dt class="col-2 text-right">{% translate '内存' %}:</dt> <dd class="col-10">{{ vm.mem }} MB</dd>
                            <dt class="col-2 text-right">{% translate '镜像' %}:</dt> <dd class="col-10">{{ vm.image_name }}</dd>
                            <dt class="col-2 text-right">{% translate '系统盘大小' %}:</dt>
                            <dd class="col-10" id="id-vm-sys-disk-size" data-sys-disk-size="{{ vm.get_sys_disk_size }}">{{ vm.get_sys_disk_size }} Gb</dd>
                            <dt class="col-2 text-right">{% translate '机组' %}:</dt> <dd class="col-10">{{ vm.host.group }}</dd>
                            <dt class="col-2 text-right">{% translate '宿主机' %}:</dt> <dd class="col-10">{{ vm.host.ipv4 }}</dd>
                            <dt class="col-2 text-right">{% translate '备注' %}:</dt> <dd class="col-10">{{ vm.remarks }}</dd>
                        </dl>
                        <form id="id-form-vm">
                            <div class="form-group row">
                                <label for="id-disk-expand" class="offset-sm-1 col-sm-2 col-form-label">{% translate '输入系统盘扩容值' %}</label>
                                <div class="col-sm-7">
                                    <div class="input-group mb-3" id="id-disk-expand">
                                        <div class="input-group-prepend">
                                            <span class="input-group-text">{% translate '扩容大小' %}</span>
                                        </div>
                                        <input name="expand_size" id="id-input-expand-size" type="text" required
                                               class="form-control" aria-label="">
                                        <div class="input-group-append">
                                            <span class="input-group-text">GB</span>
                                        </div>
{#                                        <div class="input-group-append">#}
{#                                            <span class="input-group-text">扩容后大小为<span id="id-expand-after-size" class="text-warning"></span> GB</span>#}
{#                                        </div>#}
                                    </div>
                                </div>
                            </div>
                            <div class="offset-1">
                                <button class="btn btn-primary" id="btn-vm-disk-expand">{% translate '确定' %}</button>
                            </div>
                        </form>
                    </div>
                </div>
            </div>
        </div>
    </div>
{% endblock %}

{% block script %}
    <script type="text/javascript" src="{% static 'evcloud/common.js' %}"></script>
    <script type="text/javascript" src="{% static 'vms/vms_disk_expand.js' %}"></script>
{% endblock %}